<template>
	<scroll-view class="content" scroll-y @scrolltolower="nextPage">
		<swiper class="swiper" circular :indicator-dots="true">
			<swiper-item class="swiper-item" v-for="banner in bannerList" @tap="goBanner(banner)">
				<image :src="banner.img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="tab-index">
			<view v-for="(cate,i) in aiCateList" :class="'tab-index-item ' +( tabindex==i?'active':'')"
				@click="tabChange(i)">
				{{cate.name}}
			</view>
		</view>
		<view v-for="(data,i) in aiCateList[tabindex].data" :key="i" @click="checkLogin() && goCate(data)">

			<card :data="data" :likes.sync="data.likes"></card>
		</view>


		<view style="position: relative;">
			<by-nike-avtar ref="login"></by-nike-avtar>
		</view>
		<view style="height: 88upx;"></view>
	</scroll-view>
</template>

<script>
	import {
		getBanner,
		getAiCate,
		getCateFunction,
		getArticleDetails,
		getFunctionDetails
	} from '../../API/index.js';
	import card from './components/card.vue';
	export default {
		components: {
			card
		},
		data() {
			return {
				bannerList: [{
					img: '/static/index/banner@2x.png'
				}],
				aiCateList: [{
					"id": 1,
					"name": "公众号"
				}],
				tabindex: 0,
			}
		},
		async mounted() {
			uni.showLoading({
				title: "加载中..."
			});
			await this.getBannerList();
			await this.getAiCateList();
			await this.getCateFunctionList();
			uni.hideLoading();
		},
		onLoad() {

		},
		methods: {
			throttle(fn, interval) {
				//该变量用于记录上一次函数的执行事件
				let lastTime = 0

				const _throttle = function(...args) {
					// 获取当前时间
					const nowTime = new Date().getTime()

					// cd剩余时间
					const remainTime = nowTime - lastTime
					// 如果剩余时间大于间隔时间，也就是说可以再次执行函数
					if (remainTime - interval >= 0) {
						fn.apply(this, args)
						// 将上一次函数执行的时间设置为nowTime，这样下次才能重新进入cd
						lastTime = nowTime
					}
				}
				// 返回_throttle函数
				return _throttle
			},
			async getBannerList() {
				let _this = this;
				let res = await getBanner()
				_this.bannerList = res.map(item => {
					if (!item.img.includes('http')) {
						item.img = 'https://zm.quya.vip/storage/' + item.img;
						console.log(item.img);
					}
					return item;
				});
			},
			async getAiCateList() {
				let _this = this;
				let res = await getAiCate()
				_this.aiCateList = res.map(i => {
					i.page = 1;
					i.pageSize = 10;
					i.data = [];
					return i;
				});
				console.log(_this.aiCateList);
			},
			async getCateFunctionList() {
				let _this = this;
				let index = 0 + _this.tabindex;
				let res = await getCateFunction({
					cate_id: _this.aiCateList[index].id,
					page: _this.aiCateList[index].page,
					pageSize: _this.aiCateList[index].pageSize
				});
				console.log('getCateFunctionList', res);
				_this.aiCateList[index].data = [].concat(..._this.aiCateList[index].data).concat(res.data);
				_this.aiCateList[index].last_page = res.last_page;
			},
			async goBanner(banner) {
				if (banner.type == 1) {
					await getArticleDetails({
						id: banner.obj_id
					});
					this.Go('/subpages/content/content?type=storage');
				}
				if (banner.type == 2) {
					let res = this.checkLogin() && await getFunctionDetails({
						id: banner.obj_id
					});
					console.log(res);
					uni.setStorageSync('chattemplate', res.template)
					this.Go('/subpages/AIQuestion/AIQuestion?function_id=' + banner.id + '&title=' + res.name +
						'&template=1');
				}
				if (banner.type == 3) {
					let res = this.checkLogin() && await getFunctionDetails({
						id: banner.obj_id
					});
					console.log(res);
					uni.setStorageSync('chattemplate', res.intro);
					this.Go('/pages/chat2/chat?function_id=' + banner.id + '&title=' + res.name +
						'&template=1');
				}
			},
			async goCate(data) {
				// if (data.type == 1) {
				// 	let res = await getFunctionDetails({
				// 		id: data.id
				// 	});
				// 	this.Go('/subpages/AIQuestion/AIQuestion?function_id='+data.id+'&title='+data.name);
				// }

				// if (data.type == 2) {
				// 	await getArticleDetails({
				// 		id: data.id
				// 	});
				// 	this.Go('/subpages/content/content?type=storage');
				// }
				if (data.type == 1) {
					let res = await getFunctionDetails({
						id: data.id
					});
					console.log(res);
					uni.setStorageSync('chattemplate', res.template)
					this.Go('/subpages/AIQuestion/AIQuestion?function_id=' + data.id + '&title=' + res.name +
						'&template=1');
				}
				if (data.type == 2) {
					let res = await getFunctionDetails({
						id: data.id
					});
					console.log(res);
					uni.setStorageSync('chattemplate', res.intro)
					this.Go('/pages/chat2/chat?function_id=' + data.id + '&title=' + res.name +'&template='+1);
				}
			},
			tabChange(i) {
				this.tabindex = i;
				if (!this.aiCateList[this.tabindex].data.length)
					this.throttle(this.getCateFunctionList, 2000)();
			},
			nextPage() {
				if (this.aiCateList[this.tabindex].last_page == this.aiCateList[this.tabindex].page)
					return;
				this.aiCateList[this.tabindex].page++;
				this.getCateFunctionList();
			}
		}
	}
</script>

<style scoped>
	.content {
		height: calc(100vh - var(--window-bottom));
		background: linear-gradient(0deg, #CDF1F7, #BCDFFD, #CFDBFF)
	}

	.swiper {

		width: 750upx;
		height: 340upx;
	}

	.swiper image {
		height: 300upx;
		width: 690upx;
		/* border: 1px solid red; */
		border-radius: 20upx;
	}

	.swiper-item {
		width: 750upx;
		display: flex;
		margin: 15upx 0;
		align-items: center;
		justify-content: center;
	}

	.tab-index {
		margin-top: 30upx;
		width: 750upx;
		height: 110upx;
		border-radius: 30upx;
		background-color: #e0eeff;
		padding: 25upx 30upx;
		padding-right: 10upx;
		gap: 30upx;
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow: scroll;
		align-items: center;
		box-sizing: border-box;
	}

	.tab-index-item {
		height: 60upx;
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		align-items: center;
		padding: 0 36upx;
		margin: auto 0;
		font-size: 30upx;
		color: #99A1B6;
	}

	.tab-index-item.active {

		background: #FFFFFF;
		border-radius: 30px;
		color: #284575;
		font-weight: 400;
	}
</style>